<template>
    <div>
        <el-dialog title="创建知识库" :visible.sync="visible" width="30%" :before-close="handleClose"
            :close-on-click-modal="false">
            <el-form :model="addStoreForm" ref="addStoreForm" :rules="rules">
                <el-form-item label="知识库封面图" prop="face" style="display:flex;flex-direction:column;flex-wrap:wrap"> 
                    <upload :face="addStoreForm.face" @updateFace="updateFace" />
                </el-form-item>
                <el-form-item label="知识库名" prop="storename">
                    <el-input v-model="addStoreForm.storename" maxlength="10" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="知识库介绍" prop="briefly">
                    <el-input type="textarea" show-word-limit maxlength="50" placeholder="请输入内容"
                        v-model="addStoreForm.briefly">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary" size="small" @click="dosubmit">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { addcategory,uploadFace } from '../../api/api.js'
import upload from '../common/upload.vue'
export default {
    name: 'addStoreDialog',
    props: ['visible'],
    components:{
        upload
    },
    data() {
        return {
            addStoreForm: {
                storename: '',
                briefly: '',
                face:'',
            },
            rules: {
                briefly: [{
                    required: true,
                    message: '请输入简介',
                    trigger: 'blur'
                },
                {
                    max: 100,
                    message: '不能大于50个字符',
                    trigger: ['blur', 'change']
                }
                ],
                storename: [{
                    required: true,
                    message: '请输入知识库名称',
                    trigger: ['blur', 'change']
                }],
                face: [{
                    required: true,
                    message: '请上传知识库封面图',
                    trigger: ['blur', 'change']
                }],
            }
        }
    },
    methods: {
        updateFace(file, type) {
			this.onfilechange(file, type);
		},
        onfilechange(file, type) {
			if (!file) {
				return;
			}
			uploadFace(file, type).then(resp => {
				if (resp.data.status == 200) {
					this.addStoreForm.face = `http://${resp.data.imageUrl}`;
				} else {
					this.$message({
						message: resp.data.message,
						type: 'error',
						showClose: true
					})
				}

			}).catch(err => {
				this.$message({
					message: err,
					type: 'error',
					showClose: true
				});
			})

		},
        handleClose() {
            this.$emit('closeDialog');
        },
        dosubmit() {
            this.$refs.addStoreForm.validate((valid) => {
                if (valid) {
                    addcategory(this.addStoreForm).then(res => {
                        if (res.data.code == 200) {
                            this.$emit('closeDialog');
                            this.$notify({
                                title: '提示',
                                message: '创建成功',
                                type: 'success'
                            });
                            this.$router.push(`/store/${res.data.id}`)
                        } else {
                            this.$notify({
                                title: '提示',
                                message: res.data.message,
                                type: 'error'
                            });
                        }
                    })
                }
            })

        }
    }

}
</script>

<style scoped="scoped">
</style>